<!--
 * @Description: 课程盒子组件
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-11-27 14:30:32
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-14 10:23:01
-->
<template>
    <nuxt-link :to="url" class="course-box">
        <div class="img-box">
          <img :src="IMG_URL + data.img" alt="" />
        </div>
        <div class="info-box">
          <div class="name line-over-1">{{ data.title }}</div>
          <div class="info line-over-1">
              {{ data.classTime }}
          </div>
          <div class="number">{{ data.signUpNum }}人报名</div>
          <div class="bottom">
              <div class="Price item pf-bold">￥{{ data.price }}</div>
              <button class="make-btn">立即报名</button>
          </div>
        </div>
    </nuxt-link>
</template>

<script>
export default {
    props:{
        data:{
            type:Object,
            default:()=>{
              return {}
            }
        }
    },
    computed:{
        url(){
          if(this.data.onlineType == 1){
            return `/courseCenter/courseVideo/${this.data.id}`
          }else if(this.data.onlineType == 2){
            return `/courseCenter/courseDelis/${this.data.id}`
          }else {
            return '/404'
          }
        }
    },

}
</script>

<style lang="less" scoped>
.course-box {
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 20px;
  display: block;
  .img-box {
    height: 0;
    padding-bottom: 61.4%;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .info-box {
    text-align: left;
    padding: 0 15px;
    overflow: hidden;
    height: 175px;
    .name {
      font-size: 18px;
      color: #333333;
      margin-top: 14px;
    }
    .info {
      font-size: 16px;
      color: #999999;
      margin-top: 14px;
    }
    .number{
      font-size: 16px;
      color: #999999;
      margin-top: 10px;
    }
    .bottom {
      display: flex;
      margin-top: 25px;
      .item {
        flex: 1;
      }
      .Price {
        font-size: 28px;
        color: #f93e3e;
      }
    }
  }
}

.make-btn {
  width: 100px;
  height: 34px;
  background: linear-gradient(90deg, #00cdac 0%, #8cdad4 100%);
  opacity: 1;
  border-radius: 22px;
  font-size: 16px;
  color: #fff;
  border: 0;
  outline: 0;
  cursor: pointer;
}


@media screen and (max-width: 760px) {
    .containers-warp {
  margin-top: 8.684vw;
  margin-bottom: 26.316vw;
  line-height: 1;
}
.images-title {
  width: 100%;
  height: 0;
  padding-bottom: 21%;
  overflow: hidden;
}

.course-box {
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 2.632vw;
  .img-box {
    height: 0;
    padding-bottom: 61.4%;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .info-box {
    text-align: left;
    padding: 0 1.974vw;
    overflow: hidden;
    height: 25.026vw;
    .name {
      font-size: 2.368vw;
      color: #333333;
      margin-top: 1.842vw;
    }
    .info {
      font-size: 2.105vw;
      color: #999999;
      margin-top: 1.842vw;
    }
    .number{
      font-size: 2.105vw;
      color: #999999;
      margin-top: 1.316vw;
    }
    .bottom {
      display: flex;
      margin-top: 3.289vw;
      .item {
        flex: 1;
      }
      .Price {
        font-size: 3.684vw;
        color: #f93e3e;
      }
    }
  }

}
.btn {
  border: 0;
  outline: 0;
  cursor: pointer;
}
.make-btn {
  width: 13.158vw;
  height: 4.474vw;
  background: linear-gradient(90deg, #00cdac 0%, #8cdad4 100%);
  opacity: 1;
  border-radius: 22px;
  font-size: 2.105vw;
  color: #fff;
}
.list {
  margin-top: 2.632vw;
  margin-bottom: 6.579vw;
}
}
</style>